    <style include="settings-shared cr-icons cr-nav-menu-item-style">
      :host {
        box-sizing: border-box;
        display: block;
        padding-bottom: 5px; /* Prevents focus outlines from being cropped. */
        padding-top: 8px;
      }

      :host * {
        -webkit-tap-highlight-color: transparent;
      }

      #topMenu {
        color: var(--settings-nav-item-color);
        display: flex;
        flex-direction: column;
        min-width: fit-content;
      }

      /* Needed to override the styles on a[href] from settings-shared. */
      a[href] {
        color: var(--cr-nav-menu-item-color);
      }

      #advancedButton {
        --ink-color: var(--settings-nav-item-color);
        background: none;
        border: none;
        border-radius: initial;
        box-shadow: none;
        color: var(--settings-nav-item-color);
        height: unset;
        margin-top: 8px;
        padding-inline-end: 0;
        text-transform: none;
      }

      #advancedButton:focus {
        outline: none;
      }

      :host-context(.focus-outline-visible) #advancedButton:focus {
        outline: auto 5px -webkit-focus-ring-color;
      }

      :host-context([enable-branding-update]) #advancedButton {
        /* Override the border-radius: initial on #advancedButton. Can be
         * removed once enable-branding-update launches. */
        border-end-end-radius: 100px;
        border-start-end-radius: 100px;
      }

      #advancedButton > span,
      #extensionsLink > span {
        flex: 1;
      }

      #advancedButton > iron-icon,
      #extensionsLink > .cr-icon {
        height: var(--cr-icon-size);
        margin-inline-end: 14px;  /* 16px - 2px from margin for outline. */
        width: var(--cr-icon-size);
      }

      #menuSeparator {
        /* Per bettes@, this is different from the other separator lines. */
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 8px;
        margin-top: 8px;
      }

      #extensionsLink iron-icon {
        display: none;
      }

      :host-context([enable-branding-update]) #extensionsLink iron-icon {
        display: block;
      }

      #aboutIcon {
        display: none;
      }

      :host-context([enable-branding-update]) #aboutIcon {
        --cr-icon-image: url(//resources/images/chrome_logo_dark.svg);
        -webkit-mask-size: 18px;
        background-color: var(--iron-icon-fill-color);
        display: block;
        height: var(--cr-icon-size);
        margin-inline-end: 20px;
        margin-inline-start: 0;
        width: var(--cr-icon-size);
      }

      @media (prefers-color-scheme: dark) {
        #menuSeparator {
          border-bottom: var(--cr-separator-line);  /* override */
        }
      }
    </style>

    <div role="navigation">
      <cr-menu-selector>
        <iron-selector id="topMenu" selectable="a:not(#extensionsLink)"
            attr-for-selected="href" on-iron-activate="onSelectorActivate_"
            on-click="onLinkClick_" selected-attribute="selected">
          <a role="menuitem"
              id="people" href="/people" hidden="[[!pageVisibility.people]]"
              class="cr-nav-menu-item">
            <iron-icon icon="cr:person"></iron-icon>
            $i18n{peoplePageTitle}
            <paper-ripple></paper-ripple>
          </a>
          <a role="menuitem" id="autofill" href="/autofill"
              hidden="[[!pageVisibility.autofill]]"
              class="cr-nav-menu-item">
            <iron-icon icon="settings:assignment"></iron-icon>
            $i18n{autofillPageTitle}
            <paper-ripple></paper-ripple>
          </a>
          <a role="menuitem" href="/privacy"
              hidden="[[!pageVisibility.privacy]]"
              class="cr-nav-menu-item">
            <iron-icon icon="cr:security"></iron-icon>
            $i18n{privacyPageTitle}
            <paper-ripple></paper-ripple>
          </a>
          <a role="menuitem" id="appearance" href="/appearance"
              hidden="[[!pageVisibility.appearance]]"
              class="cr-nav-menu-item">
            <iron-icon icon="settings:palette"></iron-icon>
            $i18n{appearancePageTitle}
            <paper-ripple></paper-ripple>
          </a>
          <a role="menuitem" href="/search" class="cr-nav-menu-item">
            <iron-icon icon="cr:search"></iron-icon>
            $i18n{searchPageTitle}
            <paper-ripple></paper-ripple>
          </a>
    <if expr="not chromeos and not lacros">
          <a role="menuitem" id="defaultBrowser" class="cr-nav-menu-item"
            href="/defaultBrowser"
            hidden="[[!pageVisibility.defaultBrowser]]">
            <iron-icon icon="settings:web"></iron-icon>
            $i18n{defaultBrowser}
            <paper-ripple></paper-ripple>
          </a>
    </if>
          <a role="menuitem" id="onStartup" href="/onStartup"
              class="cr-nav-menu-item"
              hidden="[[!pageVisibility.onStartup]]">
            <iron-icon icon="settings:power-settings-new"></iron-icon>
            $i18n{onStartup}
            <paper-ripple></paper-ripple>
          </a>
          <cr-button
              role="menuitem" tabindex="-1"
              id="advancedButton"
              class="cr-nav-menu-item"
              aria-expanded$="[[boolToString_(advancedOpened)]]"
              on-click="onAdvancedButtonToggle_"
              hidden="[[!pageVisibility.advancedSettings]]">
            <span>$i18n{advancedPageTitle}</span>
            <iron-icon icon="[[arrowState_(advancedOpened)]]">
            </iron-icon></cr-button>
          <iron-collapse id="advancedSubmenu" opened="[[advancedOpened]]"
              hidden="[[!pageVisibility.advancedSettings]]">
            <iron-selector id="subMenu" selectable="a" attr-for-selected="href"
                role="navigation" on-click="onLinkClick_"
                selected-attribute="selected">
              <a role="menuitem" href="/languages"
                  disabled$="[[!advancedOpened]]" class="cr-nav-menu-item">
                <iron-icon icon="settings:language"></iron-icon>
                $i18n{languagesPageTitle}
                <paper-ripple></paper-ripple>
              </a>
              <a role="menuitem" href="/downloads"
                  disabled$="[[!advancedOpened]]" class="cr-nav-menu-item">
                <iron-icon icon="cr:file-download"></iron-icon>
                $i18n{downloadsPageTitle}
                <paper-ripple></paper-ripple>
              </a>
              <a role="menuitem" href="/accessibility" class="cr-nav-menu-item"
                disabled$="[[!advancedOpened]]">
                <iron-icon icon="settings:accessibility"></iron-icon>
                $i18n{a11yPageTitle}
                <paper-ripple></paper-ripple>
              </a>
    <if expr="not chromeos and not lacros">
              <a role="menuitem" href="/system" class="cr-nav-menu-item"
                  disabled$="[[!advancedOpened]]">
                <iron-icon icon="settings:build"></iron-icon>
                $i18n{systemPageTitle}
                <paper-ripple></paper-ripple>
              </a>
    </if>
              <a role="menuitem" id="reset" href="/reset"
                  disabled$="[[!advancedOpened]]"
                  hidden="[[!pageVisibility.reset]]" class="cr-nav-menu-item">
                <iron-icon icon="settings:restore"></iron-icon>
                $i18n{resetPageTitle}
                <paper-ripple></paper-ripple>
              </a>
            </iron-selector>
          </iron-collapse>
          <div id="menuSeparator"></div>
          <a role="menuitem" id="extensionsLink" class="cr-nav-menu-item"
              href="chrome://extensions" target="_blank"
              hidden="[[!pageVisibility.extensions]]"
              on-click="onExtensionsLinkClick_"
              title="$i18n{extensionsLinkTooltip}">
            <iron-icon icon="cr:extension"></iron-icon>
            <span>$i18n{extensionsPageTitle}</span>
            <div class="cr-icon icon-external"></div>
            <paper-ripple></paper-ripple>
          </a>
          <a role="menuitem" id="about-menu" href="/help"
              class="cr-nav-menu-item">
            <span id="aboutIcon" class="cr-icon" role="presentation"></span>
            $i18n{aboutPageTitle}
            <paper-ripple></paper-ripple>
          </a>
        </iron-selector>
      </cr-menu-selector>
    </div>
